<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
    <script src="https://v1.hitokoto.cn/?encode=js&c=d&select=%23hitokoto" defer></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
    <style>
        .CodeMirror {
            padding: 0px;
        }
        .CodeMirror, .CodeMirror-scroll {
            min-height: 130px;
            max-height: 200px;
        }
        .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
            background: none;
        }
        .editor-statusbar {
            display: none;
        }
        .editor-preview {
            overflow-y: initial!important;
        }
        ul {
            list-style: none;
            margin-left: 0;
            padding-left: 0;
        }
    </style>
    <!--js和css-->
    @@include("/common/_quote.html"){}
</head>
<body>
    @@include("/common/_header.html"){}

    @@if(article.coverImageUrl! !=null){
    <img src="${article.coverImageUrl!}" onerror="this.src='${config.siteUrl!}/static/img/default_article_cover.jpg'" style="display: none;" id="cover-img">
    @@}

    <div class="container custome-container">
        <nav class="breadcrumb">
            <a class="crumbs" title="返回首页" href="${config.siteUrl}" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-home"></i>首页</a>
            <i class="fa fa-angle-right"></i>
            <a href="${config.siteUrl}/type/${article.typeId}" title="点击查看该分类文章" data-toggle="tooltip" data-placement="bottom">${article.type.name}</a>
            <i class="fa fa-angle-right"></i>正文
        </nav>
        <div class="row">
            <div class="col-sm-8 blog-main">
                <div class="blog-body overflow-initial fade-in">
                    <div class="article-flag">
                        @@if(article.original!true  == true){
                        <span class="article-blockquote article-blockquote-green"></span>
                        <span class="article-original article-original-green">
                                <a href="${config.siteUrl!}/article/${article.id!}">原创</a>
                            </span>
                        @@}else{
                        <span class="article-blockquote article-blockquote-red"></span>
                        <span class="article-original article-original-red">
                                <a href="${config.siteUrl!}/article/${article.id!}">转载</a>
                            </span>
                        @@}

                        <div class="blog-info-meta pull-right">
                            <ul class="list-unstyled list-inline">
                                <li><i class="fa fa-clock-o fa-fw"></i>发表于 ${article.createTime,dateFormat="yyyy年MM月dd日"}</li>
                                <li><i class="fa fa-eye fa-fw"></i><a class="pointer" data-original-title="${article.lookCount!(0)}人浏览了该文章" data-toggle="tooltip" data-placement="bottom">浏览 (<num>${article.lookCount!(0)}</num>)</a></li>
                                <li><a href="#comment-box" data-original-title="${article.commentCount!(0)}人评论了该文章" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-comments-o fa-fw"></i>评论 (${article.commentCount!(0)})</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="blog-info overflow-initial">
                        <div class="bottom-line">
                            <h1 class="blog-info-title">
                                <strong>${article.title!}</strong>
                            </h1>
                        </div>
                        <div
                                @@if(article.isMarkdown!true == true){
                              class="blog-info-body  markdown-body editor-preview-active-side"
                                @@}else{
                              class="blog-info-body"
                                @@}
                            >
                            ${article.content!}
                        </div>
                        <div class="separateline"><span>正文到此结束</span></div>
                        <div id="social" style="margin-bottom: 45px;">
                            <div class="social-main">
                                <span class="like">
                                    <a href="javascript:;" data-id="${article.id!}" title="点赞" ><i class="fa fa-thumbs-up"></i>赞 <i class="count"> ${article.loveCount!(0)}</i> </a>
                                </span>
                                <div class="shang-p">
                                    <div class="shang-empty"><span></span></div>
                                    <span class="shang-s"><a onclick="PaymentUtils.show();" style="cursor:pointer">赏</a> </span>
                                </div>
                                <span class="share-s oppose">
                                    <a href="javascript:;" data-id="${article.id!}" title="踩踏" ><i class="fa fa-thumbs-up"></i>踩 <i class="count"> ${article.opposeCount!(0)}</i> </a>
                                </span>

                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="article-footer overflow-initial">所属分类：<a href="${config.siteUrl!}/type/${article.typeId!}" data-original-title="点击查看${article.type.name!}分类的文章" data-toggle="tooltip" data-placement="bottom">${article.type.name!}</a></div>
                    </div>
                </div>
                <div class="blog-body article-tag">
                    <div class="cat">
                        <ul class="list-unstyled">
                            <li>
                                <strong>本文标签：</strong>
                                @@for(item in article.tags!){
                                <a href="${config.siteUrl!}/tag/${item.id!}" class="c-label" data-original-title="${item.name!}" data-toggle="tooltip" data-placement="bottom" target="_blank">${item.name!}</a>
                                @@}
                            </li>
                            <li>
                                <strong>版权声明：</strong>

                                @@if(article.original!true == true){
                                本站原创文章，于${article.createTime!,dateFormat="yyyy年MM月dd日"}由<a href="${config.siteUrl!}" target="_blank" data-original-title="${config.siteName!}" data-toggle="tooltip" data-placement="bottom"><strong>${config.authorName!}</strong></a>发布，转载请注明出处
                                @@}else{
                                本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请<a target="_blank" href="mailto:${config.authorEmail!}" title="点击给我发邮件" data-toggle="tooltip" data-placement="bottom"><strong>联系本站长</strong></a>删除，谢谢。
                                @@}

                            </li>
                        </ul>
                    </div>
                </div>
                <!--<div class="blog-body">-->
                    <!--<a href="https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html" target="_blank" rel="external nofollow">-->
                        <!--<img src="${config.staticWebSite!}/img/ad/aliyun_sale1000-60.png" alt="阿里云首购8折" class="img-responsive">-->
                    <!--</a>-->
                <!--</div>-->
                <div class="blog-body prev-next">
                    <nav class="nav-single wow" data-wow-delay="0.3s">
                        @@if(other.prev! !=null){
                            <a href="${config.siteUrl!}/article/${other.prev.id!}" rel="prev">
                                <span class="meta-nav" data-original-title="${other.prev.title!}" data-toggle="tooltip" data-placement="bottom"><span class="post-nav"><i class="fa fa-angle-left"></i> 上一篇</span>
                                    <br>${other.prev.title!}
                                </span>
                            </a>
                        @@}else{
                                <a href="javascript:void(0)" rel="nofollow prev">
                                <span class="meta-nav" data-original-title="已经到第一篇了" data-toggle="tooltip" data-placement="bottom"><span class="post-nav"><i class="fa fa-angle-left"></i> 上一篇</span>
                                    <br>已经到第一篇了
                                </span>
                                </a>
                        @@}
                        @@if(other.next! !=null){
                            <a href="${config.siteUrl!}/article/${other.next.id!}" rel="next">
                                <span class="meta-nav" data-original-title="${other.next.title!}" data-toggle="tooltip" data-placement="bottom"><span class="post-nav">下一篇 <i class="fa fa-angle-right"></i></span>
                                    <br>${other.next.title!}
                                </span>
                            </a>
                        @@}else{
                                <a href="javascript:void(0)" rel="nofollow next">
                                <span class="meta-nav" data-original-title="已经到最后一篇了" data-toggle="tooltip" data-placement="bottom"><span class="post-nav">下一篇 <i class="fa fa-angle-right"></i></span>
                                    <br>已经到最后一篇了
                                </span>
                                </a>
                        @@}
                        <div class="clear"></div>
                    </nav>
                </div>
               <!--热门推荐 -->
                <div class="blog-body clear overflow-initial">
                    <h4 class="bottom-line"><i class="fa fa-fire icon"></i><strong>热门推荐</strong></h4>
                    <ul class="list-unstyled">
                        @@for(item in hostList){
                        <li class="line-li">
                            <div class="line-container">
                                <div class="line-left">
                                    @@if(item! !=null && item.coverImageUrl! !=null){
                                    <img class="lazy-img" data-original="${item.coverImageUrl}" width="50" height="50" rel="external nofollow"/>
                                    @@}else{
                                    <img class="lazy-img" data-original="${config.siteUrl!}/static/img/favicon.ico" width="50" height="50" rel="external nofollow"/>
                                    @@}
                                </div>
                                <div class="line-right">
                                    <div class="text">
                                        <a href="${config.siteUrl!}/article/${item.id!}" data-original-title="${item.lookCount!}人浏览了该文章" data-toggle="tooltip" data-placement="bottom">
                                            ${item.title!}
                                        </a>
                                    </div>
                                    <div class="text">
                                        <a href="${config.siteUrl!}/article/${item.id!}" data-original-title="${item.lookCount!}人浏览了该文章" data-toggle="tooltip" data-placement="bottom">
                                            ${item.title!}
                                        </a>
                                    </div>
                                    <div class="text">
                                        <span class="views" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="文章阅读次数"><i class="fa fa-eye fa-fw"></i>浏览(${item.lookCount!(0)})</span>
                                        <span class="comment" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="文章评论次数">
                                            <a href="${config.siteUrl}/article/${item.id!}#comment-box" rel="external nofollow">
                                                <i class="fa fa-comments-o fa-fw"></i>评论(${item.commentCount!(0)})
                                            </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @@}
                    </ul>
                    <div class="clear"></div>
                </div>
                <!-- 相关文章 -->
                <div class="blog-body clear overflow-initial">
                    <h4 class="bottom-line"><i class="fa fa-google-wallet icon"></i><strong>相关文章</strong></h4>
                    <ul class="list-unstyled">
                        @@for(item in relatedList!){
                        <li class="line-li">
                            <div class="line-container">
                                <div class="line-right">
                                    <div class="text">
                                        <a href="${config.siteUrl}/article/${item.id!}" data-original-title="${item.lookCount!}人浏览了该文章" data-toggle="tooltip" data-placement="bottom">
                                            ${item.title!}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @@}
                    </ul>
                    <div class="clear"></div>
                </div>
                <!--评论-->
                @@if(article! !=null && article.comment!true ==true){
                <div class="blog-body clear overflow-initial expansion">
                    <div id="comment-box" data-id="${article.id!}"></div>
                </div>
                @@}else{
                <div class="blog-body clear overflow-initial expansion gray">
                    <i class="fa fa-close fa-fw"></i>该篇文章的评论功能已被站长关闭
                </div>
                @@}
            </div>

            @@include("/common/_sidebar.html"){}
        </div>
    </div>
@@include("/common/_footer.html"){}
</body>
</html>